<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  
  
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    跨域问题 |
    
    M_W_Q</title>
  
    <link rel="shortcut icon" href="/bolg/favicon.ico">
  
  <link rel="stylesheet" href="/bolg/css/style.css">
  
    <link rel="stylesheet" href="/bolg/fancybox/jquery.fancybox.min.css">
  
  <script src="/bolg/js/pace.min.js"></script>
</head>

<body>
<main class="content">
  <section class="outer">
  

<article id="post-跨域问题" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      跨域问题
    </h1>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/bolg/2019/10/21/%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98/" class="article-date">
  <time datetime="2019-10-21T14:06:44.887Z" itemprop="datePublished">2019-10-21</time>
</a>
        
      </div>
    

    
      
    <div class="tocbot"></div>





    

    <div class="article-entry" itemprop="articleBody">
      


      

      
        <h3 id="跨域问题"><a href="#跨域问题" class="headerlink" title="跨域问题"></a>跨域问题</h3><h4 id="什么是跨域"><a href="#什么是跨域" class="headerlink" title="什么是跨域"></a>什么是跨域</h4><p>javaScript出于安全考虑，对不在同一页面的对象不允许操作</p>
<h4 id="跨域的场景"><a href="#跨域的场景" class="headerlink" title="跨域的场景"></a>跨域的场景</h4><ul>
<li>不同的二级域名</li>
<li>不同的协议</li>
<li>不同的端口号<h4 id="解决跨域问题"><a href="#解决跨域问题" class="headerlink" title="解决跨域问题"></a>解决跨域问题</h4></li>
<li>JSONP（废弃）<br>jsonp通过带有回调函数callback的json来解决跨域问题。但是他支持的仅仅是get请求，其他的请求类型是不支持</li>
<li>CORS<br>CORS（跨域资源共享），屏蔽开发着，通过浏览器自动添加头信息处理，用户无感知。服务端相应的也需要添加相关的头信息。它是会先请求OPTIONS的一个预请求，获取得到跨域支持的http方法，然后确认真正的请求。缺点是部分浏览器并不能支持该方式</li>
<li>中间层搭建<br>java或者node.js来搭建中间层，进行请求转发。缺点是中间多了一层转发对系统消耗和网络开销都是有很大的开销</li>
<li>Nginx反向代理<br>需要搭建一个nginx反向代理服务器，在url请求时进行url转发具体服务器</li>
</ul>
<h4 id="CORS跨域解决"><a href="#CORS跨域解决" class="headerlink" title="CORS跨域解决"></a>CORS跨域解决</h4><h5 id="CORS涉及的请求响应头"><a href="#CORS涉及的请求响应头" class="headerlink" title="CORS涉及的请求响应头"></a>CORS涉及的请求响应头</h5><ul>
<li>Access-Control-Allow-Origin允许客户端访问，支持*或者完整域名两种方式，并且不支持同时配置多个域名</li>
<li>Access-Control-Allow-Methods允许访问的请求方式</li>
<li>Access-Control-Allow-Credentials是否允许请求带有验证信息，若获取客户端下的cookie时需要设置为true</li>
<li>Access-Control-Max-Age缓存配置</li>
<li>Access-Control-Allow-Headers允许服务器访问的客户端请求头用逗号分隔。<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">public class CORSFilter implements Filter &#123;  </span><br><span class="line">    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException &#123;  </span><br><span class="line">        HttpServletResponse response = (HttpServletResponse) res;  </span><br><span class="line">        response.setHeader(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;);  </span><br><span class="line">        response.setHeader(&quot;Access-Control-Allow-Methods&quot;, &quot;GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, PATCH&quot;);  </span><br><span class="line">        response.setHeader(&quot;Access-Control-Max-Age&quot;, &quot;3600&quot;);  </span><br><span class="line">        response.setHeader(&quot;Access-Control-Allow-Headers&quot;, &quot;Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization, Cache-control&quot;);  </span><br><span class="line">        chain.doFilter(req, res);  </span><br><span class="line">    &#125;  </span><br><span class="line">    public void init(FilterConfig filterConfig) &#123;&#125;  </span><br><span class="line">    public void destroy() &#123;&#125;  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">@Configuration</span><br><span class="line">public class ComponentRestAutoConfiguration &#123;</span><br><span class="line">    /**</span><br><span class="line">     * rest 跨域配置</span><br><span class="line">     */</span><br><span class="line">    @Bean(initMethod=&quot;init&quot;)</span><br><span class="line">    @ConfigurationProperties(prefix = ALLOWEDORIGIN_KEY_PREFIX)</span><br><span class="line">    public AutoConfigInsideCorsFilter insideCorsFilter() &#123;</span><br><span class="line">        return new AutoConfigInsideCorsFilter();</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    /**</span><br><span class="line">     * 默认allowedOrigins的属性的key的前缀</span><br><span class="line">     */</span><br><span class="line">    private static final String ALLOWEDORIGIN_KEY_PREFIX = &quot;cors&quot;;</span><br><span class="line">    </span><br><span class="line">    @Provider</span><br><span class="line">    class AutoConfigInsideCorsFilter extends InsideCorsFilter&#123;</span><br><span class="line">        private Map&lt;String, String&gt; origin;</span><br><span class="line">        public Map&lt;String, String&gt; getOrigin() &#123;</span><br><span class="line">            return origin;</span><br><span class="line">        &#125;</span><br><span class="line">        public void setOrigin(Map&lt;String, String&gt; origin) &#123;</span><br><span class="line">            this.origin = origin;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        public void init() &#123;</span><br><span class="line">            if(MapUtils.isEmpty(origin)) &#123;</span><br><span class="line">                return ;</span><br><span class="line">            &#125;</span><br><span class="line">            this.allowedOrigins = new HashSet&lt;&gt;(origin.values());</span><br><span class="line">            this.origin = null;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://m_aleen.gitee.io/bolg/2019/10/21/%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98/" data-id="ck32z8ytv000869dbbu3cdrw8"
         class="article-share-link">Share</a>
      
    </footer>

  </div>

  
    
  <nav class="article-nav">
    
      <a href="/bolg/2019/10/21/Effective%20Java%20%E9%98%85%E8%AF%BB%E7%AC%94%E8%AE%B0%EF%BC%88%E4%B9%8B%E5%88%9B%E5%BB%BA%E5%92%8C%E9%94%80%E6%AF%81%E5%AF%B9%E8%B1%A1%EF%BC%89/" class="article-nav-link">
        <strong class="article-nav-caption">Newer posts</strong>
        <div class="article-nav-title">
          
            Effective Java 阅读笔记（之创建和销毁对象）
          
        </div>
      </a>
    
    
      <a href="/bolg/2019/10/21/JAVA%E7%B1%BB%E5%8A%A0%E8%BD%BD%E6%9C%BA%E5%88%B6/" class="article-nav-link">
        <strong class="article-nav-caption">Olde posts</strong>
        <div class="article-nav-title">JAVA类加载机制</div>
      </a>
    
  </nav>


  

  
    
  

</article>



</section>
  <footer class="footer">
  <div class="outer">
    <div class="float-right">
      <ul class="list-inline">
  
    <li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>
  
    <li><i class="fe fe-bookmark"></i> <span id="busuanzi_value_page_pv"></span></li>
  
</ul>
    </div>
    <ul class="list-inline">
      <li>&copy; 2019 M_W_Q</li>
      <li>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></li>
      <li>Theme  <a href="https://github.com/zhwangart/hexo-theme-ocean" target="_blank" rel="noopener">Ocean</a></li>
    </ul>
  </div>
</footer>

</main>

<aside class="sidebar sidebar-specter">
  
    <button class="navbar-toggle"></button>
<nav class="navbar">
  
    <div class="logo">
      <a href="/bolg/"><img src="/bolg/images/hexo.svg" alt="M_W_Q"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/bolg/">Home</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/bolg/archives">Archives</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/bolg/gallery">Gallery</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/bolg/about">About</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="搜索">
        <i class="fe fe-search"></i>
        Search
      </a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      <div class="totop" id="totop">
  <i class="fe fe-rocket"></i>
</div>
    </li>
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/bolg/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
  </aside>
  <script src="/bolg/js/jquery-2.0.3.min.js"></script>
<script src="/bolg/js/jquery.justifiedGallery.min.js"></script>
<script src="/bolg/js/lazyload.min.js"></script>
<script src="/bolg/js/busuanzi-2.3.pure.min.js"></script>

  <script src="/bolg/fancybox/jquery.fancybox.min.js"></script>



  <script src="/bolg/js/tocbot.min.js"></script>
  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
    });
  </script>


<script src="/bolg/js/ocean.js"></script>

</body>
</html>